<template>
  <div ref="charts" class="charts" />
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "Index",
  props: {
    genderRatio: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      myEcharts: null,
    };
  },
  computed: {},
  watch: {
    genderRatio() {
      this.renderCharts();
    },
  },
  mounted() {
    // 初始化charts实例
    this.myEcharts = echarts.init(this.$refs.charts);
    this.renderCharts();
    // 监听窗口大小变化
    window.addEventListener("resize", () => {
      this.myEcharts.resize();
    });
    // 点击事件
    this.myEcharts.on("click", (params) => {
      this.$router.push({
        name: "StudentList",
        query: {
          name: params.name,
          type: 2,
        },
      });
    });
  },
  methods: {
    // 渲染图表
    renderCharts() {
      const option = {
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            radius: ["70%", "95%"],
            // 颜色
            color: ["rgba(61, 151, 221, 0.5)", "rgb(88, 108, 177)"],
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 3,
              borderColor: "#fff",
              borderWidth: 1,
            },
           
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
            data: this.genderRatio,
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: "{b}：{d}%",
        },
      };
      this.myEcharts.setOption(option);
    },
  },
};
</script>

<style scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>
